R - Shiny

class: center, middle, inverse, title-slide

# L’Extension : Shiny
## Mes Premiers Pas
### Mickaël Canouil, Ph.D. (<a href="http://m.canouil.fr/" target="_blank"> m.canouil.fr</a>)
### Dernière mise à jour : 26-03-2021

---

class: part-slide

@-webkit-keyframes glow {
 from {
 /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #1b81e5, 0 0 40px #1b81e5, 0 0 50px #1b81e5, 0 0 60px #1b81e5, 0 0 70px #1b81e5;*/
 }
 to {
 text-shadow: 0 0 20px #a9a9a9, 0 0 30px #a9a9a9, 0 0 40px #a9a9a9, 0 0 50px #a9a9a9;
 }
}
</style>

# Diapositives et matériel [ mcanouil/rshiny](https://github.com/mcanouil/rshiny/)

---
class: part-slide

# Préparer sa session

---

# Trucs et astuces

* Eviter de changer votre répertoire de travail avec `setwd()`.
* Ne pas utiliser de `.Rprofile` modifiant .
* Désactiver la conversion automatique en facteurs `options(stringsAsFactors = FALSE)`.
* Ne pas utiliser `rm(list = ls())` pour "rafraichir".
* Ne pas utiliser la sauvegarde/restauration par défaut de .

.pull-left[
.center[
![](data:image/png;base64,#images/rstudio_setup.png)
]
]

.pull-right[
.center[
![](data:image/png;base64,#images/rwindows_setup.png)
]
]

---
class: part-slide

# Qu'est-ce que Shiny ? <img src = "data:image/png;base64,#images/shiny.png", width = "216px" />

---

# Avant Shiny ...

Il était nécessaire de connaître/maîtriser :

* **HTML**, pour concevoir des pages (statique) web.

* **CSS**, pour ajouter du _style_ à une page HTML.

* **JavaScript**, pour effectuer des "calculs" au sein d'une page HTML (via un navigateur).

---

# Shiny

Shiny est une extension permettant la création d'application web interactive directement depuis .

* Page internet.

* Documents (R Markdown) interactifs.

* Tableaux de bords.

Les applications Shiny sont compatibles avec :

* CSS.

* "html widgets".

* JavaScript.

---

# Installation & Chargement

La version stable de Shiny peut se télécharger sur le CRAN.

```r
install.packages("shiny")
```

La version en développement est disponible sur GitHub .

```r
if (!require("remotes")) install.packages("remotes")
remotes::install_github("rstudio/shiny")
```

Charger Shiny dans sa session .

```r
library("shiny")
```

---

# Composantes d'une application Shiny

+ L'extension Shiny.
    
    ```r
    library("shiny")
    ```

+ Une interface (`ui`, *i.e.*, "user interface").
 
 ```r
 ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !")
 ```

+ Une fonction serveur (`server`).
 
 ```r
 server <- function(input, output, session) { }
 ```

+ La construction d'un objet "Shiny app".
    
    ```r
    shinyApp(ui, server)
    ```

???

App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R)

---

# Composantes d'une application Shiny

L'application Shiny peut être démarrée par simple exécution.

```r
library("shiny")

ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !")

server <- function(input, output, session) { }

shinyApp(ui, server)
```

???

App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R)

---

# Composantes d'une application Shiny

Ou via un script `app.R`, placé dans un répertoire portant généralement le nom de l'application.

```{}
materials/00-app
\-- app.R
```

```r
library("shiny")

ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !")

server <- function(input, output, session) { }

shinyApp(ui, server)
```

```r
runApp("materials/00-app")
```

???

App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R)

---

# Composantes d'une application Shiny

Une fois l'application démarrée, vous devriez voir une fenêtre s'ouvrir.

```r
runApp("materials/00-app")
```

```r
#> Listening on http://127.0.0.1:4550
```

???

App [`"materials/00-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/00-app/app.R)

* URL par défaut (hôte)

* Port défini au hasard

* Console R "occupée"

* Bouton "stop"

* `Ctrl`+ `c`

* Fermer la fenêtre de l'application

---

# L'interface (`ui`)

* `fluidPage()`, la fonction gérant la structure de la page internet ("responsive web design").

```r
ui <- fluidPage("Bonjour, vous êtes sur une application Shiny !")
```

Pour ajouter des contrôles (`*Input()`).

* `textInput()`, la fonction gérant un champ de saisie de texte.

```r
  textInput(inputId = "name", label = "Nom", value = "default")
```

```r
ui <- fluidPage(
 textInput(inputId = "name", label = "Nom", value = "default")
)
```

???

App [`"materials/01-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/01-app/app.R)

---

# L'interface (`ui`)

Les contrôles (`*Input()`) nativement disponibles :

.pull-left[

* `checkboxGroupInput()`

* `checkboxInput()`

* `dateInput()`

* `dateRangeInput()`

* `fileInput()`

* `numericInput()`

]

.pull-right[

* `passwordInput()`

* `selectInput()`

* `selectizeInput()`

* `sliderInput()`

* `textAreaInput()`

* `textInput()`

]

---

# L'interface (`ui`)

```r
runApp("materials/01-app")
```

```r
#> Listening on http://127.0.0.1:4550
```

???

App [`"materials/01-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/01-app/app.R)

---

# Le serveur (`server`)

Notre application ne contient aucune action serveur (`server`).

```r
library("shiny")

ui <- fluidPage(
 textInput(inputId = "name", label = "Nom", value = "default")
)

server <- function(input, output, session) { }

shinyApp(ui, server)
```

???

App [`"materials/01-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/01-app/app.R)

---

# Le serveur (`server`)

* Du `server` à `ui` $\rightarrow$ `output`.

```r
server <- function(input, output, session) {
 output$hello_message <- renderText("Bonjour")
}
```

```r
output$id <- renderTYPE({
 # Une expression générant la sortie de type "TYPE"
})
```

* Partie _gauche_ : objet (`output`) renvoyé vers l'interface (`ui`) avec un identifiant unique (`id`).

* Partie _droite_ : fonction spécifique pour générer la sortie qui pourra être affichée dans l'interface (`ui`).

???

App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R)

---

# Le serveur (`server`)

Les fonctions `render*()` nativement disponibles :

* `renderCachedPlot()`

* `renderDataTable()`

* `renderImage()`

* `renderPlot()`

* `renderPrint()`

* `renderTable()`

* `renderText()`

* `renderUI()`

---

# Le serveur (`server`)

* Du `server` à `ui` $\rightarrow$ `output`.

```r
server <- function(input, output, session) {
 output$hello_message <- renderText("Bonjour")
}
```

* `textOutput()`, la fonction gérant l'affichage des éléments construits par le serveur (`server`).

```r
library("shiny")

ui <- fluidPage(
 textInput(inputId = "name", label = "Nom", value = "default"),
 textOutput(outputId = "hello_message")
)

server <- function(input, output, session) {
 output$hello_message <- renderText("Bonjour")
}

shinyApp(ui, server)
```

???

App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R)

---

# Première application Shiny

```r
library("shiny")

ui <- fluidPage(
 textInput(inputId = "name", label = "Nom", value = "default"),
 textOutput(outputId = "hello_message")
)

server <- function(input, output, session) {
 output$hello_message <- renderText("Bonjour")
}

shinyApp(ui, server)
```

???

App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R)

---

# Première application Shiny

```r
runApp("materials/02-app")
```

```r
#> Listening on http://127.0.0.1:4550
```

???

App [`"materials/02-app"`](https://github.com/mcanouil/rshiny/tree/main/materials/02-app/app.R)

---
class: part-slide

# <img src = "data:image/png;base64,#https://avatars1.githubusercontent.com/u/8896044" height = "150px" id = "picture" />

.center[

<a href = "http://m.canouil.fr" target = "_blank"> m.canouil.fr</a>

.column[
<a href = "https://www.linkedin.com/in/mickael-canouil/" target = "_blank"> mickael-canouil</a>
]
.column[
<a href = "https://github.com/mcanouil/" target = "_blank"> mcanouil</a>
]
.column[
<a href = "https://twitter.com/mickaelcanouil/" target = "_blank"> @mickaelcanouil</a>
]

]